{% load i18n static shop_tags %}<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:'rtl,ltr,auto' }}">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}-baykeShop</title>
    <link rel="stylesheet" href="{% block stylesheet %}{% static "baykeshop/css/buefy.min.css" %}{% endblock %}">
    <link rel="stylesheet" href="{% static 'baykeshop/css/style.css' %}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css">
    <script src="{% static 'baykeshop/js/vue.js' %}"></script>
    <script src="{% static 'baykeshop/js/buefy.min.js' %}"></script>
    {% block extrastyle %}{% endblock %}
</head>
<body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}">
    
    <div id="header">
        {% block header %}
            <div id="header-top" class="has-background-black-bis">
                <div class="is-flex is-justify-content-space-between is-align-items-center container" style="height:40px">
                    <div class="head-top-left">
                        {% block head_top_left %}
                        欢迎您光临本店！
                        {% endblock %}  
                    </div>
                    <div class="head-top-right">
                        {% block head_top_right %}
                        {% if request.user.is_authenticated %}
                        <div class="dropdown is-hoverable usertools">
                            <div class="dropdown-trigger">
                              <button class="button is-radiusless is-shadowless" aria-haspopup="true" aria-controls="dropdown-menu4" 
                                style="background: none; border:none">
                                <span>欢迎您，{{ request.user.username }}</span>
                                <span class="icon is-small">
                                  <i class="mdi mdi-menu-down" aria-hidden="true"></i>
                                </span>
                              </button>
                            </div>
                            <div class="dropdown-menu" id="dropdown-menu4" role="menu" style="z-index:1000">
                              <div class="dropdown-content">
                                <a class="dropdown-item" href="{% url 'baykeshop:userinfo' %}">
                                    <span class="mdi mdi-account-box-outline"></span>
                                    个人中心
                                </a>
                                <a class="dropdown-item" href="{% url 'baykeshop:order_list' %}">
                                    <span class="mdi mdi-basket-plus-outline"></span>
                                    我的订单
                                </a>
                                <div class=" dropdown-divider"></div>
                                <a class="dropdown-item" href="{% url 'baykeshop:logout' %}">
                                    <span class="mdi mdi-logout"></span>
                                    退出
                                </a>
                              </div>
                            </div>
                        </div>
                        {% else %}
                        <a class="mr-2" href="{% url 'baykeshop:login' %}" target="_top">
                            <span class="icon"><i class="mdi mdi-login"></i></span>
                            登录
                        </a> <span class="is-size-6">|</span>
                        <a class="mr-3" href="{% url 'baykeshop:register' %}" target="_top">
                            <span class="icon"><i class="mdi mdi-cash-register"></i></span>
                            注册
                        </a>
                        {% endif %}
                        <a class="cart" href="{% url 'baykeshop:carts' %}" id="cartNum">
                            <span class="icon"><i class="mdi mdi-cart-check"></i></span>
                            购物车({$ cart_num $})
                        </a>
                        {% endblock %}
                    </div>
                </div>
            </div>

            <div id="header">
                <div id="navbar">
                    <template>
                        <b-navbar spaced shadow1 transparent wrapper-class="{% block navclass %}container{% endblock %}">
                            <template #brand>
                                <b-navbar-item tag="div">
                                    {% block navbar_logo %}
                                    <h1 class="is-size-4 has-text-weight-medium">BaykeShop</h1>
                                    {% endblock %} 
                                </b-navbar-item>
                            </template>
                            <template #start>
                                {% block navbar_start %}
                                <b-navbar-item href="{% url 'baykeshop:home' %}">
                                    首页
                                </b-navbar-item>
                                <b-navbar-item href="{% url 'baykeshop:spus' %}">
                                    全部分类
                                </b-navbar-item>
                                <b-navbar-item href="{% url 'baykeshop:article_list' %}">
                                    商城资讯
                                </b-navbar-item>
                                {% navbar_result as cates %}
                                {% for cate in cates %}
                                <b-navbar-dropdown label="{{ cate.name }}">
                                    {% for sub_cate in cate.sub_cates %}
                                    <b-navbar-item href="{% url 'baykeshop:cate_detail' sub_cate.id %}">
                                        {{ sub_cate.name }}
                                    </b-navbar-item>
                                    {% endfor %}
                                </b-navbar-dropdown>
                                {% endfor %}
                                {% endblock %}             
                            </template>
                    
                            <template #end>
                                {% block navbar_end %}
                                <b-navbar-item tag="div">
                                    <form action="{% url 'baykeshop:search' %}" method="get">
                                        {% csrf_token %}
                                        {% search request %}
                                    </form>
                                </b-navbar-item>
                                {% endblock %} 
                            </template>
                        </b-navbar>
                    </template>
                </div>
            </div>
        {% endblock %}
    </div>

    <div id="main">
        {% block breadcrumb %}
        <nav class="breadcrumb" aria-label="breadcrumbs">
            <ul>
                <li><a href="#">Bulma</a></li>
                <li><a href="#">Documentation</a></li>
                <li><a href="#">Components</a></li>
                <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
            </ul>
        </nav>
        {% endblock %}     
        {% block content %}{% endblock %}
    </div>

    {% include 'baykeshop/footer.html' %}

    {% if messages %}
        {% for message in messages %}
        <div id="notification">
            <b-notification
                auto-close 
                {% if message.tags %}type="is-{{ message.tags }} is-light"{% endif %}
                :duration="3000"
                has-icon
                position="is-top-right"
                aria-close-label="Close notification">
                {{ message }}
            </b-notification>
        </div>
        {% endfor %}
        <script>
            var notification = new Vue({
                el: '#notification',
                delimiters: ['{$', '$}'],
            })
        </script>
    {% endif %}

    <script>
        var navbar = new Vue({
            el: '#navbar',
            delimiters: ['{$', '$}'],
            data: {},
            methods: {
                toastMessage(type, message){
                    return this.$buefy.toast.open({
                        message: message,
                        type: type
                    })
                },
            }
        })
    </script>
    <script>
        var cartNum = new Vue({
            el: '#cartNum',
            delimiters: ['{$', '$}'],
            data: {
                cart_num: '{% cart_num request.user %}'
            }
        })
    </script>

    {% block extra_script %}{% endblock %}
    {% block vue %}{% endblock %} 
</body>
</html>